<template>
    <div class="pie-container">
        <!-- 饼图 -->
        <div ref="chartDom" class="com-chart"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';

@Component({
    name: 'StaticResultPie',
})
// 饼图
export default class StaticResultPie extends Vue {
    @Prop() echartData;
    chartInstance: any = null;

    @Watch('echartData', { immediate: true, deep: true })
    onWatchData(newData) {
        console.log(this.echartData, 'echart');

        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }
    mounted() {
        this.initChart();
    }

    initChart() {
        let _this = this;
        this.chartInstance = echarts.init(this.$refs.chartDom);
        const initOption = {
            color: this.echartData.color,
            title: [
                {
                    text: '{name|' + this.echartData.title + '}\n{val|' + this.echartData.total + '}',
                    top: 'center',
                    left: 'center',
                    textStyle: {
                        rich: {
                            name: {
                                fontSize: 10,
                                fontWeight: 'normal',
                                color: '#000',
                                padding: [10, 0],
                            },
                            val: {
                                fontSize: 12,
                                fontWeight: 'bolder',
                                color: '#000',
                            },
                        },
                    },
                },
            ],
            grid: {
                left: 500,
                top: 50,
                bottom: 10,
                right: 10,
                containLabel: true,
            },
            legend: {
                show: true,
                selectedMode: false,
                orient: 'horizontal',
                bottom: '2%',
                itemGap: 10,
                itemWidth: 14,
                itemHeight: 14,
                icon:
                    'path://M16.1709434,8 C22.8819622,8 28.7582258,11.4603001 32.0001952,16.6386156 L21.5039708,22.5334633 C20.579905,20.4209885 18.4632188,18.9439669 15.9997895,18.9439669 C13.3586911,18.9439669 11.1161556,20.6417249 10.3145981,23.0001357 L-0.000152222903,17.2080129 C3.15904804,11.7155231 9.21683346,8 16.1709434,8 Z',
                // formatter: param => {
                //     console.log(param);
                //     let obj = this.echartData.data.find(item => item.name == param);
                //     return `{name|${param}} {num|${obj.value}}  {percent|${obj.percent}}`;
                // },
                textStyle: {
                    fontSize: 9,
                },
            },
            polar: {},
            angleAxis: {
                interval: 1,
                type: 'category',
                data: [],
                z: 10,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#0B4A6B',
                        width: 1,
                        type: 'solid',
                    },
                },
                axisLabel: {
                    show: false,
                    interval: 0,
                    color: '#0B4A6B',
                    margin: 8,
                    fontSize: 14,
                },
            },
            radiusAxis: {
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
            },
            calculable: true,
            series: [
                {
                    type: 'pie',
                    radius: ['40%', '70%'],
                    roseType: true,
                    zlevel: 10,
                    avoidLabelOverlap: true,
                    legendHoverLink: false,
                    selectedMode: false,
                    stillShowZeroSum: true,
                    // minAngle: 15, // 最小角度
                    // startAngle: 180, // 起始角度
                    minShowLabelAngle: 0.01,
                    label: {
                        show: true,
                        // formatter: function(param) {
                        //     console.log(param, 'param');
                        //     return '{title|' + param.name + '}\n' + '{num|' + param.value + ' ' + param.percent + '%}';
                        // },
                        formatter: '{b|{b}}\n{c|{c}} {d|{d}%}',

                        // position: 'outer',
                        // alignTo: 'edge',
                        // margin: 10,

                        rich: {
                            b: {
                                fontSize: 9,
                                // x: 200,
                                // y: 100,
                                // align: 'right',
                            },
                            c: {
                                fontSize: 9,
                                lineHeight: 14,
                            },
                            d: {
                                fontSize: 9,
                                lineHeight: 14,
                            },
                            title: {},
                            num: {
                                lineHeight: 14,
                            },
                        },
                        emphasis: {
                            fontSize: 9,
                            // show: true,
                            // scale: false,
                            // scaleSize: 1,
                        },
                    },
                    itemStyle: {
                        borderColor: '#333',
                        borderWidth: 1,
                    },
                    labelLine: {
                        // showAbove: true,
                        normal: {
                            show: true,
                            // length: 10,
                            // length2: 30,
                            color: '#4BCFFC',
                            length: 6,
                            length2: 4,
                        },
                        emphasis: {
                            // 高亮处理
                            show: true,
                            scale: false,
                        },
                    },
                    data: this.echartData.data,
                },
            ],
        };
        this.chartInstance.setOption(initOption);
    }
    updateChart(e) {
        const dataOption = {
            title: [{ text: '{name|' + this.echartData.title + '}\n{val|' + this.echartData.total + '}' }],
            series: [{ data: this.echartData.data }],
        };
        this.chartInstance.setOption(dataOption);
    }

    dispose() {
        this.chartInstance.dispose(); // 销毁实例
    }
}
</script>

<style scoped>
.pie-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
